<template>
	<div class="dialog">
		<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :title="isadd?'添加信息':'编辑信息'"
			append-to-body>
			<el-form :model="Formdata" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
				<el-form-item label="姓名" prop="name" required>
					<el-input v-model="Formdata.name"></el-input>
				</el-form-item>
				<el-form-item label="日期" prop="date" required>
					<el-date-picker v-model="Formdata.date" type="date" placeholder="选择日期" size="large" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="地址" prop="address" required>
					<el-input v-model="Formdata.address"></el-input>
				</el-form-item>
				<el-form-item label="爱好" prop="likes" required>
					<el-input v-model="Formdata.likes"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submitdialog()">确 定</el-button>
			</span>
		</el-dialog>
	</div>

</template>

<script>
	export default {
		name: 'Card',
		data() {
			return {
				dialogVisible: true,
				Formdata: {
					name: '',
					date: '',
					address: '',
					linkes: '',
				},
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					date: [{
						required: true,
						message: '请选择日期',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}],
					likes: [{
						required: true,
						message: '请输入爱好',
						trigger: 'blur'
					}]
				}
			};
		},
		props: {
			isadd: {
				type: Boolean
			},
			formdata: {
				type: Object
			}
		},
		created() {
			if (Object.keys(this.formdata).length > 0 && !this.isadd) {
				this.Formdata = {
					...this.formdata
				}
			} else {
				this.Formdata = {
					name: '',
					address: '',
					linkes: '',
				}
			}
		},
		methods: {
			/* 顶部关闭的X号 */
			handleClose() {
				this.$emit('closedialog')
			},
			/* 取消 */
			close() {
				this.$emit('closedialog')
			},
			/* 确定 */
			submitdialog() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						this.$emit('submitform', {
							formdata: this.Formdata,
							isadd:this.isadd
						})
					} else {
						console.log('error submit!!');
						return false;
			  }
				});
			},

		}
	};
</script>

<style>
	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 100% !important;
	}
</style>
